<template>
    <div id="add">
        <form>
            <h3 class="text-muted my-5">添加披萨</h3>
            <div class="form-group row">
                <label for="name" class="col-sm-1">披萨</label>
                <div class="col-sm-11">
                    <input id="name" class="form-control" type="text" placeholder="输入披萨" autocomplete="off" v-model="form.name" />
                </div>
            </div>
            <div class="form-group row">
                <label for="name" class="col-sm-1">拼音</label>
                <div class="col-sm-11">
                    <input id="name" class="form-control" type="text" placeholder="输入拼音" autocomplete="off" v-model="form.pinyin" />
                </div>
            </div>
            <div id="size">
                <div class="size mt-4">
                    <p><strong>规格</strong><button class="btn btn-outline-success btn-sm float-right" type="button" onclick="clone()">+</button></p>
                    <div class="form-group row">
                        <label for="size-1" class="col-sm-1">尺寸</label>
                        <div class="col-sm-11">
                            <input id="size-1" class="form-control" type="text" placeholder="输入尺寸" autocomplete="off" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="price-1" class="col-sm-1">价格</label>
                        <div class="col-sm-11">
                            <input id="price-1" class="form-control" type="text" placeholder="输入价格" autocomplete="off" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <button id="submit" class="btn btn-success btn-block" type="submit" @click.prevent="onSubmit">添加</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Add",
        data() {
            return {
                form: {
                    size: [],
                }
            }
        },
        methods: {
            onSubmit() {
                const aSize = document.getElementsByClassName("size");
                let size = [];
                for(let i = 0; i < aSize.length; i++) {
                    let aInput = aSize[i].getElementsByTagName("input");
                    for (let j = 0; j < aInput.length; j++) {
                        size.push(aInput[j].value);
                    }
                    if(size[0] != "" && size[1] != "") {
                        this.form.size.push({size: size[0], price: size[1] + ".00"});
                    }
                    size = [];
                }
                const query = Bmob.Query("Pizza");
                query.set("name", this.form.name);
                query.set("pinyin", this.form.pinyin);
                query.set("size", this.form.size);
                query.save().then(response => {
                    this.$store.commit("setMenus");
                    this.form = {size: []};
                    for (let i = aSize.length; 0 < i; i--) {
                        if(i != 1) {
                            document.getElementById("size").removeChild(aSize[i - 1])
                        }else {
                            let aInput = aSize[i - 1].getElementsByTagName("input");
                            for (let j = 0; j < aInput.length; j++) {
                                aInput[j].value = "";
                            }
                        }
                    }
                }).catch(error => console.log(error));
            }
        }
    }
</script>

<style scoped>
    label {transform: translateY(5px);text-align: right;}
</style>